<template>
	<view>
		<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/financing-nav-bg.png"
			class="w-full index-bg" mode="widthFix"></image>

		<uni-nav-bar title="余额通" left-icon="back" color="#FFF" :background-color="navBg" :fixed="true" :statusBar="true"
			:border="false" @clickLeft="$tab.back()" @clickRight="$tab.nav(`/pages/mine/financing/mine`)"
			right-width="160rpx">
			<block slot="right">
				<view class="nav-right text-center">
					摇钱树
				</view>
			</block>
		</uni-nav-bar>

		<view class="content px-20">
			<view class="text-FFF font-700 px-28" style="font-size: 64rpx;" v-if="detail">
				{{ detail.amount }}
			</view>
			<view class="text-FFF px-28">
				我的余额通
			</view>

			<view class="flex items-center mt-32  text-center">
				<view class="nav-right" style="background-color: #55AAFF;color: #FFF;" @click="handleTransferIn">
					转入
				</view>
				<view class="nav-right ml-24" style="background-color: #B9EB00;color: #FFF;" @click="handleSell">
					转出
				</view>
			</view>

			<view class="px-36 py-32 round-28 bg-FFF mt-32">
				<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :fixed="false">
					<view class="" v-for="(item,index) in list" :key="item.id" @click="handleList(item,index)">
						<view class="text-32 font-700">
							{{item.name}}
						</view>
						<view class="mt-24 flex items-center justify-between" style="padding-right: 142rpx;">
							<view class="">
								<view class="text-40 font-700" style="color: #FE6735;">
									{{item.perRate}}
								</view>
								<view class="text-24 text-9E9E9E">
									投资利率
								</view>
							</view>

							<view class="">
								<view class="text-40 font-700">
									{{item.validTime}}天
								</view>
								<view class="text-24 text-9E9E9E">
									{{item.startPrice}}起投 | 中低风险
								</view>
							</view>
						</view>
						<u-divider></u-divider>
					</view>
				</s-pull-scroll>
			</view>
		</view>

		<u-popup :show="buyShow" bgColor="transparent" :safe-area-inset-bottom="false" @close="buyShow = false">
			<view class="buyPopup" v-if="list.length > 0">
				<view class="text-FFF">
					<view class="text-32 font-700">
						{{list[selectIndex].name}}
					</view>
					<view class="mt-24 flex items-center justify-between pr-48" style="padding-right: 142rpx;">
						<view class="">
							<view class="text-40 font-700">
								{{list[selectIndex].perRate}}
							</view>
							<view class="text-24 ">
								投资利率
							</view>
						</view>

						<view class="">
							<view class="text-40 font-700">
								{{list[selectIndex].validTime}}天
							</view>
							<view class="text-24 ">
								{{list[selectIndex].startPrice}}起投 | 中低风险
							</view>
						</view>
					</view>
					<u-divider></u-divider>
				</view>

				<view class="flex flex-col items-center">
					<input type="number" class="input" placeholder="请输入购买数量" v-model="buyForm.price"
						@input="handleRate" />
					<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/icon_fin_zhuanhuan@2x.png"
						class="image-44 my-24" mode=""></image>
					<view class="input" style="color: #FE6735;">
						{{buyYj}}
					</view>
				</view>


				<view class="buyConfirm text-center text-FFF text-32" @click="handleBuyConfirm">
					立即购买
				</view>
			</view>
		</u-popup>

		<u-popup :show="pay_password" @close="pay_password = false,payPassword='' " mode="center" :round="20">
			<view class="p-48">
				<view class="pay_title">
					<text>请输入支付密码</text>
				</view>
				<view class="flex justify-around mt-28">
					<u-code-input v-model="payPassword" :maxlength="6" dot :focus="true"></u-code-input>
				</view>

				<view class="mt-32 text-FFF round-12 text-center py-20" style="background-color: #E2382B;"
					@click="confirmOrder(),pay_password = false">
					确认
				</view>
			</view>
		</u-popup>


		<u-popup :show="convertShow" @close="convertShow = false" bgColor="transparent" mode="center"
			:safeAreaInsetBottom="false">
			<view class="convert-wrap flex flex-col items-center" v-if="convertShow" :style="{
				background:`url(https://file.fulewanjia.com/fulewanjia/profile/appImages/${exchangeTitle == '余额转余额通' ? 'zhuanruyuetong' : 'zhuanchuyue'}.png) no-repeat`,
				backgroundSize:'100% 100%'
			}">
				<view class="" style="color: #C4816B;">
					{{exchangeTitle}}
				</view>
				<view class="text-44 font-700 mt-12" style="color: #FE6835;">
					{{exchangeAmount}}
				</view>
				<!-- 	<view class="text-24" style="color: #F62323;">
					转换余额手续费：10%
				</view> -->
				<view class="box-2 mt-28 py-32 flex flex-col items-center">
					<input type="number" v-model="convertValue" class="input text-center" placeholder="请输入转换额度" />
				</view>

				<view class="mt-44 text-center flex items-center">
					<view class="box-3 text-32" style="color: #676767;" @click="convertShow = false">
						取消转换
					</view>
					<view class="box-3 box-4 text-32 ml-48 text-FFF" style="color: #676767;" @click="convertConfirm">
						立即转换
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		throttle
	} from 'throttle-debounce';
	var thro;
	export default {
		data() {
			return {
				navBg: "transparent",
				detail: null,
				list: [],

				buyShow: false,
				buyYj: "预计购买后的收益",
				buyForm: {
					price: "",
					rate: null,
					startPrice: null,
					validTime: null
				},
				id: null,
				selectIndex: 0,

				pay_password: false,
				payPassword: "",

				exchangeTitle: "",
				convertShow: false,
				exchangeAmount: "",
				richList: [],
				ratioId: null,
				convertValue: ""
			};
		},
		onPageScroll(e) {
			if (e.scrollTop > 100) {
				this.navBg = "#F4652B"
			} else {
				this.navBg = "transparent"
			}
		},
		onShow() {
			thro = this
			this.getData()
			this.refresh()
		},
		methods: {
			handleTransferIn() {
				this.richList.forEach(item => {
					if (item.moneyName == "余额") {
						this.ratioId = item.moneyChangeConfigList[0].id
						this.exchangeAmount = item.amount
					}
				})
				this.convertValue = ""
				this.exchangeTitle = "余额转余额通"
				this.convertShow = true
			},
			handleSell() {
				this.richList.forEach(item => {
					if (item.moneyName == "余额通") {
						this.ratioId = item.moneyChangeConfigList[0].id
						this.exchangeAmount = item.amount
					}
				})
				this.convertValue = ""
				this.exchangeTitle = "余额通转余额"
				this.convertShow = true
			},
			convertConfirm: throttle(2000, async () => {
				if (Number(thro.convertValue) <= 0 || Number(thro.convertValue) > thro.exchangeAmount) {
					thro.$modal.msg('请输入正确的转换额度!')
					return
				}

				const res = await thro.$Api.currency.moneyChange(thro.ratioId, thro.convertValue)
				thro.convertValue = ""
				thro.convertShow = false
				thro.getData()
			},{
				noTrailing:true
			}),
			async handleRate() {
				if (!this.buyForm.price || this.buyForm.price < this.buyForm.startPrice) {
					this.buyYj = "预计购买后的收益"
					this.$modal.msg('请输入正确的购买数量!')
					return
				}

				const res = await this.$Api.currency.financialProductsCount(this.buyForm)

				this.buyYj = res
			},
			handleBuyConfirm() {
				if (!this.buyForm.price || this.buyForm.price < this.buyForm.startPrice) {
					this.$modal.msg('请输入正确的购买数量!')
				}

				this.buyShow = false
				this.pay_password = true

			},
			handleList(row, index) {
				if (this.detail.amount < row.startPrice) {
					this.$modal.msg('暂无充足余额通!')
					return
				}
				this.selectIndex = index
				this.id = row.id
				this.buyForm.rate = row.rate
				this.buyForm.startPrice = row.startPrice
				this.buyForm.validTime = row.validTime
				this.buyShow = true
			},
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(async () => {
					if (pullScroll.page == 1) {
						this.list = [];
					}
					const curList = await this.$Api.currency.financialProductsList({
						pageNum: 10,
						pageSize: pullScroll.page
					})

					this.list = this.list.concat(curList.rows || []);

					if (curList.total == 0) {
						pullScroll.empty()
					}

					if (this.list.length >= curList.total) {
						pullScroll.finish();
					} else {
						pullScroll.success();
					}
				}, 500);
			},
			async getData() {
				const userRichInfo = await this.$Api.user.userRichInfo()
				this.richList = userRichInfo.data

				this.detail = userRichInfo.data.filter(item => {
					return item.moneyName == "余额通"
				})[0]
			},
			confirmOrder: throttle(2000, () => {
				if (!thro.payPassword || thro.payPassword.length != 6) {
					thro.$modal.msg('请输入支付密码!')
					return
				}

				thro.$Api.currency.financialProductsBuy({
					id: thro.id,
					price: thro.buyForm.price,
					payPassword: thro.payPassword
				}).then(res => {
					thro.buyForm.price = ""
					thro.payPassword = ""
					thro.buyYj = "预计购买后的收益"
					thro.pay_password = false
					thro.getData()
					thro.refresh()
					thro.$modal.msg('购买成功!')
					console.log(res)
				}).catch(err => {
					thro.buyForm.price = ""
					thro.payPassword = ""
					thro.buyYj = "预计购买后的收益"
					thro.pay_password = false
					console.log(res)
				})
			},{
				noTrailing:true
			})
		}
	}
</script>

<style lang="scss">
	.index-bg {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}

	.content {
		position: relative;
		z-index: 9;
		margin-top: 82rpx;
	}

	.buyPopup {
		width: 100%;
		height: 1028rpx;
		background: url('https://file.fulewanjia.com/fulewanjia/profile/appImages/financing-pop-bg.png') no-repeat;
		background-size: 100% 100%;
		padding: 300rpx 44rpx 42rpx 44rpx;

		.input {
			width: 662rpx;
			height: 80rpx;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			text-align: center;
			line-height: 80rpx;
		}

		.buyConfirm {
			width: 662rpx;
			height: 88rpx;
			background: linear-gradient(180deg, #FF561D 33%, #FF0064 100%);
			border-radius: 356rpx 356rpx 356rpx 356rpx;
			margin-top: 142rpx;
			line-height: 88rpx;
		}
	}

	.nav-right {
		width: 160rpx;
		height: 64rpx;
		background: #EBFF13;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		color: #333;
		line-height: 64rpx;
	}

	.convert-wrap {
		width: 686rpx;
		height: 892rpx;
		padding: 386rpx 0 34rpx 0;

		.box-2 {
			width: 622rpx;
			background: #FCF8F4;
			border-radius: 28rpx 28rpx 28rpx 28rpx;

			.input {
				width: 536rpx;
				height: 88rpx;
				background: #F4EEDE;
				border-radius: 98rpx 98rpx 98rpx 98rpx;
			}
		}

		.box-3 {
			width: 240rpx;
			height: 80rpx;
			background: #E8E2E0;
			border-radius: 356rpx 356rpx 356rpx 356rpx;
			line-height: 80rpx;
		}

		.box-4 {
			background: linear-gradient(180deg, #FF561D 33%, #FF0064 100%);
		}
	}
</style>